document.addEventListener('DOMContentLoaded', function() {
    // 当前地区
    let currentRegion = 'all';
    
    // 模拟数据
    const activitiesData = {
        all: [
            { 
                id: 1, 
                title: '自然博物馆"昆虫艺术"特展', 
                city: '北京市', 
                date: '2023-10-15', 
                image: 'https://images.unsplash.com/photo-1484557985045-edf25e08da73?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '通过艺术视角探索昆虫世界的奇妙，结合传统绘画技法展示昆虫之美'
            },
            { 
                id: 2, 
                title: '植物园"叶脉艺术"工作坊', 
                city: '上海市', 
                date: '2023-10-22', 
                image: 'https://images.unsplash.com/photo-1534710961216-75c88202f43d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '学习叶脉结构并创作叶脉画，融合自然科学知识与传统艺术'
            },
            { 
                id: 3, 
                title: '天文台"星空诗意"观测夜', 
                city: '广州市', 
                date: '2023-10-28', 
                image: 'https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '观星活动结合古诗词赏析，体验科学与文学的跨界之美'
            },
            { 
                id: 4, 
                title: '海洋馆"贝壳彩绘"亲子日', 
                city: '深圳市', 
                date: '2023-11-05', 
                image: 'https://images.unsplash.com/photo-1517825738774-7de9363ef735?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '了解海洋生物知识，在贝壳上创作传统图案，带走独特纪念品'
            }
        ],
        beijing: [
            { 
                id: 1, 
                title: '自然博物馆"昆虫艺术"特展', 
                city: '北京市', 
                date: '2023-10-15', 
                image: 'https://images.unsplash.com/photo-1484557985045-edf25e08da73?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '通过艺术视角探索昆虫世界的奇妙，结合传统绘画技法展示昆虫之美'
            },
            { 
                id: 5, 
                title: '颐和园"古典园林植物"导览', 
                city: '北京市', 
                date: '2023-10-18', 
                image: 'https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '探索皇家园林中的植物配置艺术，了解传统园林设计的科学内涵'
            }
        ],
        shanghai: [
            { 
                id: 2, 
                title: '植物园"叶脉艺术"工作坊', 
                city: '上海市', 
                date: '2023-10-22', 
                image: 'https://images.unsplash.com/photo-1534710961216-75c88202f43d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '学习叶脉结构并创作叶脉画，融合自然科学知识与传统艺术'
            },
            { 
                id: 6, 
                title: '科技馆"机器人水墨画"体验', 
                city: '上海市', 
                date: '2023-10-25', 
                image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '观看机器人创作传统水墨画，探索科技与艺术的完美结合'
            }
        ]
    };

    const coursesData = {
        all: [
            { 
                id: 1, 
                title: '昆虫世界与传统绘画', 
                author: '李教授', 
                level: '初级', 
                image: 'https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '从科学角度认识昆虫，学习如何用传统绘画技法表现昆虫形态'
            },
            { 
                id: 2, 
                title: '植物学与国画技法', 
                author: '王老师', 
                level: '初级', 
                image: 'https://images.unsplash.com/photo-1560703650-ef4482c01d0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '了解植物结构特征，掌握国画中花鸟画的基本技法'
            },
            { 
                id: 3, 
                title: '天文观测与古诗词', 
                author: '张博士', 
                level: '中级', 
                image: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '探索星空奥秘，赏析古代诗词中的天文意象与科学内涵'
            },
            { 
                id: 4, 
                title: '海洋生物与传统纹样', 
                author: '陈教授', 
                level: '高级', 
                image: 'https://images.unsplash.com/photo-1559128010-7c1ad6e1b6a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '研究海洋生物多样性，分析其在传统艺术纹样中的应用'
            }
        ],
        beijing: [
            { 
                id: 1, 
                title: '昆虫世界与传统绘画', 
                author: '李教授', 
                level: '初级', 
                image: 'https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '从科学角度认识昆虫，学习如何用传统绘画技法表现昆虫形态'
            },
            { 
                id: 5, 
                title: '北京地区鸟类与工笔画', 
                author: '赵老师', 
                level: '中级', 
                image: 'https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                desc: '观察北京常见鸟类，学习工笔画技法表现鸟类特征'
            }
        ]
    };

    const orgsData = [
        { 
            id: 1, 
            name: '北京自然博物馆', 
            logo: 'https://images.unsplash.com/photo-1550828484-55f0abc998e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            desc: '专注于自然历史与生物多样性研究'
        },
        { 
            id: 2, 
            name: '上海科技馆', 
            logo: 'https://images.unsplash.com/photo-1581093057305-25a1a4f8c2b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            desc: '融合科技与艺术的综合性科普场馆'
        },
        { 
            id: 3, 
            name: '广州植物园', 
            logo: 'https://images.unsplash.com/photo-1470114716159-e389f8712fda?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            desc: '华南地区重要的植物科研与科普基地'
        },
        { 
            id: 4, 
            name: '深圳海洋世界', 
            logo: 'https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            desc: '展示海洋生物与生态系统的窗口'
        }
    ];

    // 初始化页面
    loadActivities(currentRegion);
    loadCourses(currentRegion);
    loadOrgs();

    // 地区切换事件
    document.getElementById('change-region').addEventListener('click', function() {
        const regionSelect = document.getElementById('region-select');
        currentRegion = regionSelect.value;
        
        // 更新当前地区显示
        const regionName = regionSelect.options[regionSelect.selectedIndex].text;
        document.getElementById('current-region').textContent = regionName;
        
        // 重新加载数据
        loadActivities(currentRegion);
        loadCourses(currentRegion);
    });

    // 加载活动数据
    function loadActivities(region) {
        const container = document.getElementById('activities-container');
        container.innerHTML = '';
        
        const activities = activitiesData[region] || activitiesData['all'];
        
        activities.forEach(activity => {
            const card = document.createElement('div');
            card.className = 'col-md-6 col-lg-3';
            card.innerHTML = `
                <div class="card activity-card h-100">
                    <img src="${activity.image}" class="card-img-top" alt="${activity.title}">
                    <div class="card-body">
                        <span class="badge rounded-pill mb-2">${activity.city}</span>
                        <h5 class="card-title">${activity.title}</h5>
                        <p class="card-text text-muted"><i class="bi bi-calendar me-1"></i> ${activity.date}</p>
                        <p class="card-text">${activity.desc}</p>
                        <a href="#" class="btn btn-sm btn-outline-success">立即报名</a>
                    </div>
                </div>
            `;
            container.appendChild(card);
        });
    }

    // 加载课程数据
    function loadCourses(region) {
        const container = document.getElementById('courses-container');
        container.innerHTML = '';
        
        const courses = coursesData[region] || coursesData['all'];
        
        courses.forEach(course => {
            const card = document.createElement('div');
            card.className = 'col-md-6 col-lg-3';
            card.innerHTML = `
                <div class="card activity-card h-100">
                    <img src="${course.image}" class="card-img-top" alt="${course.title}">
                    <div class="card-body">
                        <span class="badge rounded-pill mb-2">${course.level}</span>
                        <h5 class="card-title">${course.title}</h5>
                        <p class="card-text text-muted"><i class="bi bi-person me-1"></i> ${course.author}</p>
                        <p class="card-text">${course.desc}</p>
                        <a href="#" class="btn btn-sm btn-outline-success">查看详情</a>
                    </div>
                </div>
            `;
            container.appendChild(card);
        });
    }

    // 加载机构数据
    function loadOrgs() {
        const container = document.getElementById('orgs-container');
        container.innerHTML = '';
        
        orgsData.forEach(org => {
            const card = document.createElement('div');
            card.className = 'col';
            card.innerHTML = `
                <div class="card h-100 border-0 bg-transparent text-center">
                    <img src="${org.logo}" class="rounded-circle mx-auto my-3" width="120" height="120" alt="${org.name}" style="object-fit: cover;">
                    <div class="card-body p-0">
                        <h6 class="card-title">${org.name}</h6>
                        <p class="card-text text-muted small">${org.desc}</p>
                    </div>
                </div>
            `;
            container.appendChild(card);
        });
    }
});